/<!-- 使用main-container包括路由显示 -->
<template>
    <div
        class="main-content transition"
        :style="{ paddingTop: getPadding, backgroundColor: getColor }"
    >
        <router-view></router-view>
    </div>
</template>

<script>
import { themeModule } from '@/store/modules/theme'

export default {
    name: 'main-container',
    computed: {
        getColor() {
            return themeModule.color
        },
        getPadding() {
            return themeModule.padding
        }
    }
}
</script>

<style lang="less" scoped>
.main-content {
    padding-top: 60px;
    margin-left: 208px;
    height: 100%;
    background-color: rgb(247, 248, 248);
    border-top: 1px solid rgba(0, 0, 0, 0);
    &.transition {
        transition: all 0.3s ease-out;
    }
}
</style>
